<template>
  <div style="margin: 10px;">
    <el-row :gutter="20">
        <el-col :span="8">
            <el-card style="height: 350px;">
                <div class="title">
                    设备状态统计
                </div>
                <el-row>
                    <el-col :span="6">
                        <div class="zhuangtai">
                            <el-image
                            style="width: 20px; height: 20px"
                            :src="require('@/assets/img/jian.png')"
                            ></el-image>
                        </div>
                        <div class="zhuangtai">
                            <el-image
                            style="width: 20px; height: 20px"
                            :src="require('@/assets/img/jian.png')"
                            ></el-image>
                        </div>
                        <div class="zhuangtai">
                            <el-image
                            style="width: 20px; height: 20px"
                            :src="require('@/assets/img/bo.png')"
                            ></el-image>
                        </div>
                    </el-col>
                    <el-col :span="6" >
                        <div class="zhuangtai">无节目</div>
                        <div class="zhuangtai">无节目</div>
                        <div class="zhuangtai">播放中</div>
                    </el-col>
                    <el-col :span="6">
                        <div class="zhuangtai">8</div>
                        <div class="zhuangtai">1336</div>
                        <div class="zhuangtai">47</div>
                    </el-col>
                    <el-col :span="6">
                        <div class="zhuangtai">4.19%</div>
                        <div class="zhuangtai">71.20%</div>
                        <div class="zhuangtai">24.61%</div>
                    </el-col>
                </el-row>
            </el-card>
        </el-col>
        <el-col :span="8">
            <el-card style="height: 350px;">
                <div class="title">
                    信息发布设备统计
                </div>
                <div class="title">
                    设备总数<span style="font-size: 20px;font-weight: bold;color: #3399ff;">&nbsp&nbsp&nbsp14</span>
                </div>
                <el-row>
                    <el-col :span="8">
                        <div class="zhuangtai1">
                            <el-image
                            style="width: 40px; height: 40px"
                            :src="require('@/assets/img/zai.png')"
                            ></el-image>
                        </div>
                        <div class="zhuangtai1" style="font-size: 18px;color: #555555;font-weight: bold;">
                            在线
                        </div>
                        <div class="zhuangtai1" style="font-size: 18px;font-weight: bold;">
                           13
                        </div>
                    </el-col>
                    <el-col :span="8" >
                        <div class="zhuangtai1">
                            <el-image
                            style="width: 40px; height: 40px"
                            :src="require('@/assets/img/li.png')"
                            ></el-image>
                        </div>
                        <div class="zhuangtai1" style="font-size: 18px;color: #555555;font-weight: bold;">离线</div>
                        <div class="zhuangtai1" style="font-size: 18px;font-weight: bold;">1</div>
                    </el-col>
                    <el-col :span="8">
                        <div class="zhuangtai1">
                            <el-image
                            style="width: 40px; height: 40px"
                            :src="require('@/assets/img/gu.png')"
                            ></el-image>
                        </div>
                        <div class="zhuangtai1" style="font-size: 18px;color: #555555;font-weight: bold;">故障</div>
                        <div class="zhuangtai1" style="font-size: 18px;font-weight: bold;color: red;">0</div>
                    </el-col>
                </el-row>
            </el-card>
        </el-col>
        <el-col :span="8">
            <el-card style="height: 350px;">
                <div class="title">
                    节目类型统计
                </div>
                <div class="echartsCss" ref="echartsbox1">
                    <div style="text-align:center;"><el-empty description="暂无相关数据" :image-size="80"></el-empty></div>
                </div>
            </el-card>
        </el-col>
    </el-row>
    <el-row>
        <el-card style="height: 350px;margin-top: 10px;">
            <div class="title">
                今日节目播放列表
            </div>
            <el-table
                style="width: 100%">
                <el-table-column
                    prop="date"
                    label="节目编号"
                    align="center"
                   >
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="节目名称"
                    align="center"
                    >
                </el-table-column>
                <el-table-column
                    prop="address"
                    align="center"
                    label="节目类型">
                </el-table-column>
                <el-table-column
                    prop="date"
                    label="节目标签"
                    align="center"
                   >
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="节目开始时间"
                    align="center"
                    >
                </el-table-column>
                <el-table-column
                    prop="address"
                    align="center"
                    label="节目结束时间">
                </el-table-column>
            </el-table>
        </el-card>
    </el-row>
  </div>
</template>
<script>
export default {
  data () {
    return {
    }
  },
  created () {
  },
  mounted () {
    this.jiemuEcharts()
  },
  methods: {
    jiemuEcharts(){
        var echartsbox1=this.$refs.echartsbox1;
        let myChart = this.$echarts.getInstanceByDom(
        this.$refs.echartsbox1
        );
        if (myChart == null) {
        myChart = this.$echarts.init(echartsbox1);
        }
        
        var option; 
        option = {
            color:['#66ffff','#6600ff','#000000'],
            tooltip: {
                trigger: 'item'
            },
            legend: {
                // orient: 'vertical',
                left: 'left',
                data:[],
            },
            series: [
                {
                type: 'pie',
                radius: ['40%', '70%'],
                center:['50%','55%'],
                data: [
                    { value: 34, name: '普通节目' },
                    { value: 1, name: '复合节目' },
                ],
                label:{
                    formatter:function(data){
                    //显示数量、百分比
                    return `${data.name}\n (${data.value}次)`
                    }
                },
                emphasis: {
                    itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
                }
            ]
        };
        option && myChart.setOption(option);
    }
  },
}
</script>
<style lang="scss" scoped>

.title{
    font-weight: bold;
    padding: 10px;
    font-size: 14px;
}
.echartsCss{
    width: 100%;
    height: 280px;
}
.zhuangtai{
    text-align: center;
    margin-top: 30px;
    font-size: 18px;
    font-weight: bold;
    color: #555555	;
}
.zhuangtai1{
    text-align: center;
    margin-top: 30px;
}
</style>
